<template>
  <div class="mark" v-show="sideBarVisible" @click="handleShowSideBar"></div>
  <div class="learning-sidebar-nav">
    <div class="learning-sidebar-nav-button" @click="handleShowSideBar">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="2" y="7" width="11" height="2" fill="#606266"></rect>
        <rect x="2" y="11" width="14" height="2" fill="#606266"></rect>
        <rect x="2" y="15" width="8" height="2" fill="#606266"></rect>
        <rect x="2" y="3" width="16" height="2" fill="#606266"></rect>
      </svg>
      <span>Menu</span>
    </div>
    <a class="link" :class="{show: scrollTop>200}" @click="backToTop">Back to top</a>
  </div>
  <div class="learning-sidebar" :class="{open: sideBarVisible}">
    <div class="sidebar-container">
      <template v-for="r in menus" :key="r.path">
        <router-link class="link" :to="'/home/'+r.path" @click="handleClick(r)">
          {{ r.meta.name }}
        </router-link>
      </template>
    </div>
  </div>
</template>

<script setup>
import { getRouters } from '@/assets/js/utils';
import { ref } from 'vue';
import { useTitle } from '@/assets/js/hooks';
import { useEventListener } from '@/assets/js/hooks/useEventListener';

const sideBarVisible = ref(false);
const scrollTop = ref(0);
const title = useTitle();

function handleClick(item) {
  sideBarVisible.value = false;
  title.value = item.meta.name;
}

function handleShowSideBar() {
  sideBarVisible.value = !sideBarVisible.value;
}

function backToTop() {
  document.documentElement.scrollIntoView({
    behavior: 'smooth', // 平滑过渡
    block: 'start' // 上边框与视窗顶部平齐。默认值
  });
}

useEventListener('scroll', (e) => {
  scrollTop.value = e.target.scrollingElement.scrollTop;
});

const menus = getRouters();
</script>

<style scoped lang="scss">
.learning-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20rem;
  z-index: 30;
  padding: var(--learning-header-height) 32px 0;
  overflow-y: auto;
  transform: translate(-100%);
  transition: background-color .2s, opacity .25s, transform .5s cubic-bezier(.19, 1, .22, 1);
  height: 100%;
  background-color: var(--learning-bg-color-1);

  &.open {
    transform: translate(0);
  }

  .sidebar-container {
    width: 100%;
    height: 100%;

    .link {
      display: block;
      text-decoration: inherit;
      color: var(--learning-text-color);
      padding: 10px 16px;
      border-radius: 8px;
            font-size: 13px;
            transition: color .25s;

            &:hover {
                color: var(--learning-color-1);
            }

      &.router-link-active {
        font-weight: 600;
        color: var(--learning-color-1);
        background: rgba(var(--learning-color-1-rgb), .1);
      }
    }
  }
}

.learning-sidebar-nav {
  border-bottom: 1px solid var(--learning-border-color);
  background-color: var(--learning-bg-color-1);
  color: var(--learning-text-color);
  transition: border-color .2s, background-color .2s;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 0.75rem 24px;
  z-index: 2;

  .link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity .3s;

    &.show {
      opacity: 1;
    }
  }

  .learning-sidebar-nav-button {
    display: flex;
    align-items: center;

    svg {
      color: var(--learning-text-color);
    }

    [fill~="\#606266"] {
      --un-fill-opacity: 1;
      fill: rgba(96, 98, 102, var(--un-fill-opacity));
    }

    span {
      margin-left: .5rem;
    }
  }
}

.mark {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .6);
  transition: opacity .5s;
  z-index: 29;
}

@media (max-width: 767px) {
  .learning-sidebar {
    width: calc(var(--vp-sidebar-width-mobile) - 14px)
  }
}

@media screen and (min-width: 768px) {
  .learning-sidebar {
    width: calc(var(--vp-sidebar-width-small))
  }
}

@media screen and (min-width: 960px) {
  .learning-sidebar {
    top: var(--learning-header-height);
    transform: translate(0)
  }
  .learning-sidebar-nav {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  .learning-sidebar {
    padding: var(--learning-header-height) 32px 96px calc((100vw - var(--vp-screen-max-width)) / 2);
    width: calc((100vw - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small))
  }
}

@media screen and (min-width: 1680px) {
  .learning-sidebar {
    padding: var(--learning-header-height) 48px 96px calc((100vw - var(--vp-screen-max-width)) / 2);
    width: calc((100vw - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small))
  }
}
</style>
